<template>
	<view class="bg-white h-100">
		<u-navbar title="帮助中心" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" />
    
    <image src="@/static/img/index/helpCenter.png" class="imgTop w-100" />

    <view class="p-t-30 p-b-30 p-l-30 p-r-30 w-100 border-box">
      <u-search :showAction="true" actionText="搜索" :animation="true"></u-search>
    </view>

    <view class="p-l-30 p-r-30 m-t-10 w-100 border-box">
      <u-collapse @change="change" @close="close" @open="open" v-for="(item,index) in [1,2,3,4,5]" :key="index">
        <u-collapse-item title="文档指南" name="Docs guide" class="paddingBox">
          <view slot="title" class="flex" >
              <view class="question p-l-10 p-r-10 color-white b-r-10 text-center">Q{{ index+1 }}</view>
              <text class="font-14 m-l-10">文档指南</text>
          </view>
          <view class="u-collapse-content b-r-10 p-20 border-box bg-content">
            <view>涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</view>
            <view class="flex flex-row-center m-t-20">
              <view class="btn redBorder">在线咨询</view>
              <view class="btn defaultBorder">查看操作视频</view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>

	</view>
</template>

<script>
export default {
	data() {
		return {
      
		}
	},
	onLoad() {
    
	},
	methods: {
		open(e) {
      // console.log('open', e)
    },
    close(e) {
      // console.log('close', e)
    },
    change(e) {
      // console.log('change', e)
    }
	}
}
</script>

<style lang="scss" scoped>
.imgTop{
  height: 250rpx;
}
.bg-content{
  background-color: rgba(248, 248, 248, 1);
}
.redBorder{
  border: 1px solid #e60000;
  color: #e60000;
  margin-right: 20rpx;
  padding: 6rpx 10rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}
.defaultBorder{
  border: 1px solid rgba(153, 153, 153, 1);
  color: rgba(153, 153, 153, 1);
  padding: 6rpx 10rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}
/deep/ .u-collapse-item__content__text{
  padding: 24rpx 0 !important;
}
.question{
  height: 40rpx;
  background: #E60000;
  color: #ffffff;
}
.paddingBox{
  border-bottom: 1px solid #ededed;
}
::v-deep .u-line{
  display: none;
}
</style>
